<template>
	<view class="my-search" :style="{height: Wheight + 'px'}">
		<!-- 搜索框 -->
		<search-input :fullLine="true" />
		<!-- 弹出框 -->
		<view class="map-type" >
			<view class="button-two">
				<button type="primary" @click="seleteAdhibition()">
					<text>百度地图（6）</text>
					<image src="/static/images/downward.png" mode=""></image>
				</button>
				<button type="primary" class="second" @click="seleteAdhibition()">
					<text>家电（6）</text>
					<image src="/static/images/downward.png" mode=""></image>
				</button>
			</view>
			<view class="radio-type">
				<radio-group class="radio-group" @change="radioChange">
					<label class="label-item" v-for="(item, index) in items" :key="item.value">
						<radio :value="item.value" :checked="index === current" />
						<text>{{item.name}}</text>
					</label>
				</radio-group>
			</view>
		</view>
		
		<view class="list" :class="listDatas.length>6 ? 'pabottom' : '' ">
			<view class="list-header">
				<text class="merchant">商户名称</text>
				<text class="header-phone">电话号码</text>
			</view>
			<view class="list-data">
				<view class="item-list" v-for="(item, index) in listDatas">
					<view class="front-part">
						<text>{{ index+1 }}</text>.
						<text class="shop-name ">{{ item.shopName }}</text>
					</view>
					
					<text>{{ item.phone }}</text>
				</view>
			</view>
		</view>
		
		<view class="bottom-menu">
			<view class="layout">
				<view class="bottom-menu-item" v-for="(item, index) in bottomMenus">
					<view class="img-box">
						<image :class="item.class" :src=" '/static/images/index/so-the-search/' + item.img + '.png' " mode=""></image>
					</view>
					
					<text>{{ item.text }}</text>
				</view>
			</view>
			
		</view>
		
		<!-- 弹出层 -->
		<view class="mask-layer " v-show="layerShow" >
			<view class="mask-layer-black" :style="{height: Wheight + 'px'}" @click="close"></view>
			<view class="layer-box">
				<view class="layer-list" v-for="(item, index) in layerList">
					{{ item.name }}({{ item.num }})
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchInput from '@/components/index/searchTop.vue'
	export default {
		//我的采集/  我的搜索
		name: 'mySearch',
		data() {
			return {
				searchValue: '', //输入搜索的值
				//单选框的 数组
				items: [
					{
						value: '0',
						name: '全部'
					},{
						value: '1',
						name: '仅手机',
						checked: 'true'
					},{
						value: '2',
						name: '仅固话'
					}
				],
				current: 0,  //当前选中的 单选框
				//list数组
				listDatas: [
					{
						id: 0,
						shopName: '苏宁易购（中山路步行街店）',
						phone: '1350553****'
					},{
						id: 1,
						shopName: '苏宁易购（中山路步行街店）',
						phone: '1350553****'
					},{
						id: 2,
						shopName: '苏宁易购（中山路步行街店）',
						phone: '1350553****'
					},
				],
				bottomMenus: [
					{
						img: 'to-lead-phone',
						text: '导入通讯录'
					},{
						class: 'anomaly',
						img: 'group-sent message',
						text: '群发消息'
					},{
						img: 'empty-data',
						text: '清空采集数据'
					},{
						img: 'empty-contacts',
						text: '清空通讯录'
					},
				],
				Wheight: '',
				layerList: [
					{name: "百度地图", num: '6'},
					{name: "高德地图", num: '1'},
					{name: "腾讯地图", num: '5'},
					{name: "百度地图", num: '6'},
					{name: "百度地图", num: '6'},
				],
				layerShow: false,
				originId: '',
			}
		},
		components: {
			searchInput
		},
		mounted() {
			console.log(this.$store.state.ContentHeight-44);
			this.Wheight = this.$store.state.ContentHeight-44;
		},
		onLoad (data) {
			console.log(data,"data");
		},
		methods: {
			radioChange(evt) {
				console.log(evt)
				// for (let i = 0; i < this.items.length; i++) {
				// 	if (this.items[i].value === evt.target.value) {
				// 		this.current = i;
				// 		break;
				// 	}
				// }
			},
			// 选择手机的应用
			seleteAdhibition() {
				console.log("ss")
				this.layerShow = true;
			},
			close() {
				this.layerShow = false;
			}
		}
	}
</script>

<style lang="less">
	.flex {
		display: flex;
	}
	.my-search{
		background-color: #F6F5F5;
		.marginTop{
			margin-top: 20rpx;
		}
		.map-type{
			width: 100%;
			
			background: #F6F5F5;
			.button-two{
				.flex;
				button{
					width: 352rpx;
					height: 80rpx;
					line-height: 80rpx;
					.flex;
					align-items: center;
					justify-content: center;
					image{
						width: 25rpx;
						height: 13rpx;
					}
				}
				.second{
					background-color: #FF572A;
				}
			}
			.radio-type{
				padding: 33rpx;
				.radio-group{
					.flex;
					.label-item{
						margin-right: 30rpx;
						.uni-radio-input{
							width: 44rpx;
							height: 44rpx;
						}
						text{
							font-size: 34rpx;
						}
					}
				}
			}
			
		}
		@width: 450rpx;
		.list{
			padding: 30rpx;
			padding-bottom: 0;
			
			background-color: #fff;
			.list-header{
				.flex;
				margin-bottom: 20rpx;
				.merchant{
					width: @width;
				}
				text{
					font-size: 34rpx;
					color: #000000;
				}
			}
			.list-data{
				max-height: 700rpx; 
				overflow: scroll;
				text{
					color: #666666;
					font-size: 30rpx;
				}
				.item-list{
					.flex;
					align-items: center;
					padding: 40rpx 0;
					border-bottom: 1px solid #e5e5e5;
					
					.front-part{
						width: @width;
						
						
					}
					&:last-child{
						border-bottom: none;
					}
				}
				
			}
		}
		.pabottom{
			// padding-bottom: 120rpx;
		}
		.bottom-menu{
			width: 100%;
			background: #fff;
			padding: 18rpx 0;
			position: fixed;
			bottom: 0;
			.layout{
				width: 100%;
				.flex;
				align-items: center;
				justify-content: space-around;
				.bottom-menu-item{
					text-align: center;
					.img-box{
						height: 40rpx;
						image{
							width: 40rpx;
							height: 40rpx;
							margin: auto;
							display: block;
						}
						.anomaly{
							width: 38rpx;
							height: 29rpx;
							padding-top: 10rpx;
						}
					}
					
					
					text{
						font-size: 24rpx;
						margin-top: 12rpx;
						display: block;
					}
				}
			}
			
		}
		// 遮罩层
		.mask-layer{
			
			.mask-layer-black{
				width: 100%;
				background: rgba(0, 0,0,.3);
				position: fixed;
				z-index: 999;
				top: 44px;
				left: 0;
				z-index: 1;
			}
			.layer-box{
				width: 525rpx;
				margin: auto;
				background: #FFFFFF;
				padding: 0 20rpx;
				border-radius: 5px;
				z-index: 2;
				position: fixed;
				top: 20%;
				left: 50%;
				transform: translateX(-50%);
				.layer-list{
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					border-bottom: 1px solid #E5E5E5;
					
				}
			}
		}
	}

</style>
